/**
 * 仿Chrome标签页
 * @version 1.0
 * @author Ly
 */
/**
 * Ly.ChromeTabPanel构造函数
 * @param {Object} config = {
	 container : document.body,
	 initTabs : [],
	 tabWidth : -1,
	 tabsBarHeight : 25
 };
 */
Ly.ChromeTabPanel = function(config /* Object */) {
	var _this = this;
	
	config = config || {};
	
	this.handler = {
		tabsContainer   : null,
		tabs            : [],                                     // 标签对象引用
		iframeContainer : null,                                   // iframe容器
		iframes         : [],                                     // iframe对象引用，对应于每个标签页
		acitvedTab      : null,                                   // 被激活的标签
		initTab         : null                                    // 将要初始化的标签
	};
	this.config = {
		id              : Ly.getCount(),                          // 插件唯一标识
		container       : config.container || document.body,      // 承载标签的容器
		items           : [],                                     // 每个标签的配置信息
		tabWidth        : config.tabWidth || 0,                   // 标签宽度，默认自适应
		tabsBarHeight   : config.tabsBarHeight || 25              // 标签栏的高度
	};
	this.private = {
		/**
		 * 获取标签在tabs数组中的索引位置
		 * @param {Object} tab 标签对象
		 * @return {Number} 标签在tabs数组中的索引位置，若不存在则返回-1
		 */
		getTabIndex : function(tab /* Object */) {
			var handler = _this.handler,
				tabs    = handler.tabs,
				index   = -1;
			
			for (var i = 0, len = tabs.length; i < len; ++i) {
				if (tabs[i].tab === tab) {
					index = i;
				}
			}
			return index;
		},
		/**
		 * 设置iframe大小
		 * @param {Object} ifrm 要设置的iframe
		 */
		setIframeSize : function(ifrm /* Object */) {
			var config  = _this.config,
				handler = _this.handler;
			
			ifrm.style.height = (config.container.clientHeight - 35) + 'px';
			ifrm.style.width  = (config.container.clientWidth - 2) + 'px';
			
			return this;
		},
		createFrame : function() {
			var config  = _this.config,
				handler = _this.handler;
			
			handler.tabsContainer = Ly.createElement('ul', {
				id  : 'ly-chrometabpanel-tabscontainer-' + config.id,
				cls : 'ly-chrometabpanel-tabscontainer'
			});
			
			handler.iframeContainer = Ly.createElement('div', {
				id  : 'ly-chrometabpanel-iframecontainer-' + config.id,
				cls : 'ly-chrometabpanel-iframecontainer'
			});
			
			config.container.appendChild(handler.tabsContainer);
			config.container.appendChild(handler.iframeContainer);
			
			if (config.tabsBarHeight > 25) {
				var h = config.tabsBarHeight - 25;
				handler.tabsContainer.style.paddingTop = h + 'px';
				handler.iframeContainer.style.height = (config.container.offsetHeight - 35 - h) + 'px';
			} else {
				handler.iframeContainer.style.height = (config.container.offsetHeight - 35) + 'px';
			}
			
			return this;
		},
		/**
		 * 创建标签项
		 * @param {Object} item 标签项配置信息
		 */
		createTab : function(item /* Object */) {
			var config  = _this.config,
				handler = _this.handler,
				tab     = Ly.createElement('li', {
					cls : 'ly-chrometabpanel-tab',
					innerHTML : item.name
				});
			
			config.tabWidth > 0 && (tab.style.width = config.tabWidth + 'px', tab.style.overflow = 'hidden');
			
			handler.tabsContainer.appendChild(tab);
			
			handler.tabs.push({
				tab         : tab,
				iframe      : null,
				defaultTab  : item.defaultTab,
				reloadPage  : item.reloadPage
			});
			
			this.createIframe(item, tab).createSeparator(tab).bindEvents(false);
			
			if (item.defaultTab) { handler.initTab = tab; }
			
			tab = null;
			
			return this;
		},
		/**
		 * 更新标签分隔符
		 * @param {Object} tab 要更新的标签分隔符的参照位置
		 * @param {Number} position 要更新的分隔符位置，1为tab的前一个分隔符,-1为tab的后一个标签
		 */
		updateSeparator : function(tab /* Object */, position /* Number */) {
			var config = _this.config,
				handler = _this.handler;
			
			if (position > 0) {
				tab.previousSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-union-inactive.png';
			} else {
				tab.nextSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-union-inactive.png';
			}
			
			return this;
		},
		/**
		 * 创建iframe，对应于每个标签对象
		 * @param {Object} item 标签对象的配置信息
		 * @param {Object} tab 创建的标签对象，即要关联的标签对象
		 */
		createIframe : function(item /* Object */, tab /* Object */) {
			var config = _this.config,
				handler = _this.handler,
				iframe = Ly.createElement('iframe', {
					id     : 'ly-chrometabpanel-iframe-' + config.id,
					cls    : 'ly-chrometabpanel-iframe',
					frameBorder : '0',
					src    : item.loadPage
				});
			
			this.setIframeSize(iframe);
			
			handler.iframeContainer.appendChild(iframe);
			
			handler.tabs[this.getTabIndex(tab)].iframe = iframe;
			
			iframe = null;
			
			return this;
		},
		/**
		 * 创建标签的分隔符，禁止将标签插入到中间。
		 * @param {Object} tab 要创建的分隔符所参照的tab对象
		 */
		createSeparator : function(tab /* Object */) {
			var config  = _this.config,
				handler = _this.handler,
				tabs    = handler.tabs,
				tIndex  = this.getTabIndex(tab),
				separator;
			
			if (tIndex == 0) { // 插件的标签为仅有的标签
				// 创建第一个分隔符
				separator = Ly.createElement('li', {
					id        : 'ly-chrometabpanel-tab-separator-first-' + config.id,
					cls       : 'ly-chrometabpanel-tab-separator-first',
					innerHTML : '<img src="' + Ly.getPath() + 'images/default/chromeTabPanel/tab-first.png" />'
				});
				handler.tabsContainer.insertBefore(separator, tab);
				
				// 创建最后一个分隔符
				separator = Ly.createElement('li', {
					id        : 'ly-chrometabpanel-tab-separator-last-' + config.id,
					cls       : 'ly-chrometabpanel-tab-separator-last',
					innerHTML : '<img src="' + Ly.getPath() + 'images/default/chromeTabPanel/tab-last.png" />'
				});
				handler.tabsContainer.appendChild(separator);
			} else if (tabs.length - 1 == tIndex) { // 插件的标签为最后一个标签，且标签列表中有其他的标签
				this.updateSeparator(tab, 1);
				separator = Ly.createElement('li', {
					id        : 'ly-chrometabpanel-tab-separator-last-' + config.id,
					cls       : 'ly-chrometabpanel-tab-separator-last',
					innerHTML : '<img src="' + Ly.getPath() + 'images/default/chromeTabPanel/tab-last.png" />'
				});
				handler.tabsContainer.appendChild(separator);
			}
			
			return this;
		},
		// 绑定事件于标签
		bindEvents : function() {
			var config  = _this.config,
				handler = _this.handler,
				tabs    = handler.tabs;
			
			for (var i = 0, len = tabs.length; i < len; ++i) {
				Ly.addEvent('onclick', function() {
					_this.private.toggleTabs(this);
				}, tabs[i].tab);
				Ly.addEvent('onmouseover', function() {
					_this.private.mouseOver(this);
				}, tabs[i].tab);
				Ly.addEvent('onmouseout', function() {
					_this.private.mouseOut(this);
				}, tabs[i].tab);
			}
			return this;
		},
		/**
		 * 切换标签
		 * @param {Object} tab 要切换的标签对象
		 */
		toggleTabs : function(tab /* Object */) {
			var config   = _this.config,
				handler  = _this.handler,
				tabs     = handler.tabs,
				tabIndex = -1;
			
			if (handler.activedTab) {
				tabIndex = this.getTabIndex(handler.activedTab);
				
				handler.activedTab.style.backgroundImage = 'url("' + Ly.getPath() + 'images/default/chromeTabPanel/tab-bg-inactive.png")';
				if (tabIndex == 0) {
					handler.activedTab.previousSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-first.png';
				} else {
					handler.activedTab.previousSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-union-inactive.png';
				}
				
				if (tabIndex == tabs.length - 1) {
					handler.activedTab.nextSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-last.png';
				} else {
					handler.activedTab.nextSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-union-inactive.png';
				}
				tabs[this.getTabIndex(handler.activedTab)].iframe.style.left = '-5000px';
			}
			
			tabIndex = this.getTabIndex(tab);
			
			tab.style.backgroundImage = 'url("' + Ly.getPath() + 'images/default/chromeTabPanel/tab-bg-selected.png")';
			if (tabIndex == 0) {
				tab.previousSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-selected-first.png';
			} else {
				tab.previousSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-selected-left.png';
			}
			
			if (tabIndex == tabs.length - 1) {
				tab.nextSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-selected-last.png';
			} else {
				tab.nextSibling.firstChild.src = Ly.getPath() + 'images/default/chromeTabPanel/tab-selected-right.png';
			}
			
			tabs[tabIndex].reloadPage && (tabs[tabIndex].iframe.src = tabs[tabIndex].iframe.src);
			tabs[tabIndex].iframe.style.left = '0px';
			
			handler.activedTab = tab;
			
			return this;	
		},
		/**
		 * 鼠标移到标签上的事件
		 * @param {Object} tab 触发事件的标签对象
		 */
		mouseOver : function(tab /* Object */) {
			var config  = _this.config,
				handler = _this.handler;
			
			if (tab === handler.activedTab) { return this; }
			
		},
		mouseOut : function(tab) {
		},
		loadPage : function() {
		},
		updateTabs : function(tabs /* Array */) {
		},
		removeTabs : function(tabs /* Array */) {
		},
		initialization : function() {
			var config  = _this.config,
				handler = _this.handler,
				items   = _this.config.items;
			
			this.createFrame();
			
			for (var i = 0, len = items.length; i < len; ++i) {
				this.createTab(items[i]);
			}
			
			if (handler.initTab) {
				this.toggleTabs(handler.initTab);
			} else {
				this.toggleTabs(handler.initTab = handler.tabs[0].tab);
			}
			
			return this;
		}
	};
};

Ly.ChromeTabPanel.prototype = {
	version : '1.0',
	/**
	 * 绑定数据到标签插件
	 * @param {Array} items 要添加的标签
	 * items = {
		 name : '标称名称
		 loadPage : 'simple.html',
		 reloadPage : true,
		 reloadPage : false
	 }
	 */
	bind : function(items /* Array */) {
		if (items.constructor !== Array) {
			alert('绑定的数据需要一个数组类型！');
			return null;
		}
		for (var i = items.length - 1; i < 0; --i) {
			if (typeof items[i].name == 'undefined') {
				items.splice(i, 1);
			}
		}
		this.config.items = items;
		
		return this;
	},
	// 渲染标签插件
	render : function() {
		this.private.initialization();
		return this;
	},
	/**
	 * 移除指定的标签
	 * @param {Array} tabs 要移除的标签引用数组，省略参数将移除所有标签
	 */
	remove : function(tabs /* Array */) {
	},
	/**
	 * 更新标签页参数，若指定的标签不存在，则不予更新
	 * @param {Array} items 要更新的标签参数对象数组
	 * @param {Boolean} flag 指定更新的标签不存在是否追加到标签栏，默认false
	 */
	update : function(items /* Array */, flag /* Boolean */) {
	},
	/**
	 * 获取标签插件的引用，用于以后的自定义扩展
	 */
	getHandler : function() {
	}
};